<template>
	<div class="section section-base page_8">
		<div class="flex-start font30" style="padding-top: 20px;">
			<span>{{detailData.ondutyTimeStr}}</span>
			<div></div>
		</div>
		<div class="font16" id="dutyDes">
			全年消控室人员值守{{detailData.ondutyTimeStr}}
		</div>
		<animation-text :text="animationText"></animation-text>
		<div class="text-c" id="page_8_content">
			<div :class="{ 'page_8_icon':active }" id="page_8_ani">
				<div>人</div>
				<div>事</div>
				<div>物</div>
				<div>地</div>
			</div>
			<div class="text-r">
				<img v-if="active" :class="{ 'animate__zoomIn':active }" class="animate__animated" src="/ilink-app-h5-zd/static/img/ilink_1577975057682.png" alt="" style="width: 85%;" id="page_8_bg">
			</div>
		</div>
	</div>
</template>

<script>
export default {
	components: {
		
	},
	props: {
		reportData: {
			type: Object,
			default: function () {
				return {
					joinTime: {},
				}
			},
		},
		active: {
			type: Boolean,
			default: false,
		},
	},
	data() {
		return {
			dataCount1: 0,
			dataCount2:0,
			unit1:'',
			unit2:'',
			detailData: {},
			animationText:'',
		}
	},
	watch: {
		active(val) {
			if (val) {
				this.$nextTick(() => {
					this.init()
				})
			}
		},
	},
	methods: {
		init() {
			this.animated=true
			let data=this.reportData
			this.detailData=data.duty 
			this.dataCount = Number(data.duty.ondutyTimeStr.replace(/[^0-9]/ig,""))
			this.dataCountUnit = data.duty.ondutyTimeStr.replace(/[0-9]/ig,"")
			this.animationText=`最长的一次持续值守时间达到${data.duty.longstOndutyTimeStr}。时间花在了哪里，收获就在哪里!`
		}
	},
	mounted() {},
}
</script>